<template>
	<div class="ToLogin">
		<div class="head_two">
			<i class="iconfont icon-mine_left" @click="$router.back(-1)"></i>
		</div>
		<div class="login_cont">
			<p class="title">输入您的手机号</p>
			<ul class="logUl">
				<li><span>中国大陆（86+）</span></li>
				<li><input type="" name="" placeholder="请输入手机号码" v-model="text_phone"></li>
				<span>{{filterPhone}}</span>
			</ul>
			<button class="button" :class="{backg:isShow}" @click="ClickNext()">下一步</button>
		</div>
	</div>
</template>
<script type="text/javascript">
import { Toast } from 'mint-ui';
	export default{
		name:'ToLogin',
		data(){
			return{
				text_phone:"",
				isShow:false
			}
		},
		mounted:function(){
			this.type=this.$route.params.type; 
		}
		,
		computed:{
			filterPhone:function() {
				if (this.text_phone.length>10) {
					this.isShow=true
				}else{
					this.isShow=false
				}
			}
		},
		methods:{
			ClickNext:function(){
				if (/^1\d{10}$/.test(this.text_phone)) {
					this.$router.push({path:'/LoginAll/ToCode/'+this.type+'/'+this.text_phone})  
				}else{ 
					Toast("请输入正确手机号")
				}
			}
			


		}
	}
</script>
<style scoped>
 
	.logUl{
		width: 100%;
	}
	.logUl li{
		border-bottom: 1px solid #e8e8e8;
		height: 1.3333333333rem;
	}
	.logUl li input{
		width: 100%;
		height: 100%;
	 	border:0;
		outline: none;
		text-indent: 0.3333333333rem;
		font-size: 0.4rem;
	}
	.logUl li span{
		font-size: 0.4rem;
		line-height: 1.2rem;
		text-indent: 0.2666666667rem;
	}
	.button{
		width: 100%;
		outline: none;
		height:1.0666666667rem;
		color: #fff;
		font-size: 0.4533333333rem;
		background-color: #ccc;
		border:0;
		border-radius: 0.0666666667rem;
		margin:1.3333333333rem 0;
	}
 	.backg{
		background-color: #db2023;
	}

	
</style>